@@ -1,37 +0,0 @@
<template>
  <!-- 报销跟踪首页 -->
  <div :style="containStyle">
    <a-spin :spinning="mainLoading">
      <header-info></header-info>
      <div>
        <div class="list">
          <div class="menu">
            <a-row>
              <a-col
                :span="6"
                v-for="(item,index) in menus"
                :key="index"
                class="image_col"
                @click="menuClick(item)"
              >
                <a-badge v-if="mode === 'approve'" :count="item.count" style="color:#e56565 !important" :offset="[-25,10]">
                  <img :src="item.checked === true ? item.img_select:item.img" class="image_img" />
                </a-badge>
                <img v-else :src="item.checked === true ? item.img_select:item.img" class="image_img" />
                <div class="item_text">{{ item.title }}</div>
              </a-col>
            </a-row>
          </div>
        </div>
        <div class="card-wrapper" :style="cardHeight" id="cardWrapperId">
          <a-checkbox-group style="width: 100%" @change="onChange" v-model="checked">
            <a-list class="list" :loading="loading" item-layout="horizontal" :data-source="list">
              <div
                v-if="showLoadingMore"
                slot="loadMore"
                :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
              >
                <a-spin v-if="loadingMore" />
                <a-button v-else @click="onLoadMore">加载更多</a-button>
              </div>
              <a-list-item slot="renderItem" slot-scope="item">
                <a-checkbox class="checkbox" :value="item" v-if="mode === 'approve'"></a-checkbox>
                <a-list-item-meta @click="viewDetail(item)">
                  <a slot="title" style="font-weight: bold;color: #94999e;font-size: 15px;">{{ item.bxdh }}</a>
                  <div slot="description" style="float: left;width: 60%;">
                    <img src="@/assets/expense/point.png" />
                    日期：{{ item.qfrq }}
                    <br />
                  </div>
                  <div slot="description" style="width: 40%;float: right;">
                    <!-- <a-tag color="#4499fc">合计</a-tag> -->
                    <span
                      style="font-size: 22px;font-weight: bold; color: #4499fc;width: 20px;"
                    >¥{{ (item.fyhj === undefined ? '0':item.fyhj+'').replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>
                  </div>
                  <div slot="description" style="float: left;width: 60%;margin-top:10px">
                    <img src="@/assets/expense/point.png" />
                    事由：{{ item.bxsy.length <= 20 ? item.bxsy : item.bxsy.substring(0,20)+'...' }}
                  </div>

                </a-list-item-meta>

                <div class="button" @click.stop="deleteClick(item)" >
                  <img
                    src="@/assets/expense/icon_delete.png"
                    style="height: 50px;"
                    v-show="item.bxzt === '5' && mode !== 'approve'"
                  />
                </div>
                <div :style="mode === 'approve' ? 'padding-bottom: 20px;    text-align: right;':''" style="margin-top: -10px;">
                  <div
                    slot="description"
                    v-if="mode === 'approve'"
                    style="padding-bottom: 8px;"
                  >{{ item.crtName }}</div>
                  <a-tag v-if="item.bxzt === '5'" color="red">{{ item.bxztName }}</a-tag>
                  <a-tag v-else-if="item.bxzt === '7'" color="green">{{ item.bxztName }}</a-tag>
                  <a-tag v-else color="blue">{{ item.bxztName }}</a-tag>
                </div>
              </a-list-item>
              <a-divider v-if="list.length > 0" style="margin:0px 0px;float: left;width:100%" />
            </a-list>
          </a-checkbox-group>
        </div>
        <div class="button">
          <a-button
            type="primary"
            class="submit-btn"
            @click="openApproveModal"
            v-show="mode ==='approve'"
            :style="{width:(!flag?'15%':'50%')}"
          >审批</a-button>
          <a-button
            class="submit-btn"
            :style="btnStyle"
            style="background-color:#c8c9cc;border-color: #c8c9cc"
            @click="cancel"
          >返回</a-button>
        </div>
      </div>
      <approve-modal ref="approve" :expensetype="currentType" :ids="checked" @close="init"></approve-modal>
      <a-modal
        :title="'审批'"
        style="top: 25px"
        :width="800"
        v-model="modelVisibleApprove"
        :destroyOnClose="true"
        :confirmLoading="confirmLoadingApprove"
      >
        <span slot="footer">
          <a-button type="primary" @click="handleOkApprove">通过</a-button>
          <a-button type="danger" @click="handleCancelApprove">驳回</a-button>
        </span>
        <a-form :form="form">
          <a-row class="form-row">
            <a-col :span="20">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="意见">
                <a-textarea v-model="selectInfo.yj" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>
    </a-spin>
  </div>
</template>
<script>
import HeaderInfo from './header'
import { method, query } from '@/api/admin'
import { mapGetters } from 'vuex'
import approveModal from './approve_modal'
export default {
  name: 'AppHistoryMain',
  components: {
    HeaderInfo,
    approveModal
  },
  data () {
    return {
      menus: [
        {
          type: 'evection',
          img: require('@assets/expense/menu_icon_chailv.png'),
          img_select: require('@assets/expense/menu_icon_chailv_select.png'),
          title: '差旅费',
          checked: true,
          count: 0
        },
        {
          type: 'traffic',
          img: require('@assets/expense/menu_icon_jiaotong.png'),
          img_select: require('@assets/expense/menu_icon_jiaotong_select.png'),
          title: '交通费',
          checked: false,
          count: 0
        },
        {
          type: 'meal',
          img: require('@assets/expense/menu_icon_canyin.png'),
          img_select: require('@assets/expense/menu_icon_canyin_select.png'),
          title: '餐饮费',
          checked: false,
          count: 0
        },
        {
          type: 'other',
          img: require('@assets/expense/menu_icon_qita.png'),
          img_select: require('@assets/expense/menu_icon_qita_select.png'),
          title: '其它费用',
          checked: false,
          count: 0
        }
      ],
      loading: true,
      loadingMore: false,
      showLoadingMore: true,
      list: [],
      pageNo: 1,
      currentType: 'evection',
      btnStyle: {},
      mode: '',
      modelVisibleApprove: false, // 弹出框显示
      confirmLoadingApprove: false, // Loading
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      selectInfo: { yj: '' }, // 选中的数据
      checked: [],
      cardHeight: {},
      mainLoading: false,
      containStyle: {},
      pcContainStyle: {
        width: '30%',
        position: 'absolute',
        left: '40%'
      },
      flag: navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )

    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    ...mapGetters(['hitstoryRefreshFlag'])
  },
  mounted () {},
  created () {
    this.$store.commit('SET_KEEP_ALIVE_LIST', 'AppHistoryMain')
    this.init()
    if (!this.flag) {
      Object.assign(this.containStyle, this.pcContainStyle)
    } else {
      this.containStyle = {}
    }

    const u = navigator.userAgent
    console.log('u', u)
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    // ios页面输入框失焦要页面重置到顶部
    if (isiOS) { // 判断是否是ios端
      let aflag = false
      document.body.addEventListener('focusin', (e) => {
        console.log('弹起e.relatedTarget', e.relatedTarget)
        console.log('弹起e', e)
        // 软键盘弹起事件
        aflag = true
      })
      document.body.addEventListener('focusout', (e) => {
        // 软键盘关闭事件
        if (aflag) {
          console.log('关闭e', e)
          console.log('页面回到原始位置')
          window.scrollTo({ top: 0, behavior: 'smooth' })
        }
        aflag = false
      })
    }
  },
  beforeRouteLeave (to, from, next) { // 离开页面之前将高度存储到sessionStorage。这里不建议用localStorage，因为session在关闭浏览器时会自动清除，而local则需要手动清除，有点麻烦。
    sessionStorage.setItem('scrollH', document.getElementById('cardWrapperId').scrollTop)
    next()
  },

  activated () { // 在activated生命周期内，从sessionStorage中读取高度值并设置到dom
    if (sessionStorage.getItem('scrollH')) {
      document.getElementById('cardWrapperId').scrollTop = sessionStorage.getItem('scrollH')
    }
    if (this.hitstoryRefreshFlag) {
      this.init()
      if (!this.flag) {
        Object.assign(this.containStyle, this.pcContainStyle)
      }
      this.$store.commit('SET_HISTORY_REFRESH_FLAG', false)
    }
  },
  methods: {
    /**
     * 获取列表
     */
    init (reset = true) {
      console.log('*********in')
      const windowHeight = window.innerHeight
      this.cardHeight = { height: windowHeight - 240 + 'px' }
      this.mode = this.$route.query.mode
      if (this.mode === 'approve') {
        if (!this.flag) {
          this.btnStyle = { width: '15%' }
        } else {
          this.btnStyle = { width: '50%' }
        }
      } else {
        if (!this.flag) {
          this.btnStyle = { width: '30%' }
        } else {
          this.btnStyle = { width: '100%' }
        }
      }

      if (reset) {
        this.list = []
        this.pageNo = 1
        this.showLoadingMore = false
      }
      /* this.list = [
        { 'bxdh': 'BXCL468623563', 'fylx': '差旅费', 'bxztName': '提交', 'fyhj': '5000', 'qfrq': '2020-05-08', 'bxsy': '加班打车', 'bz': '备注朱' },
        { 'bxdh': 'BXCL468623563', 'fylx': '差旅费', 'bxztName': '已打款', 'fyhj': '5000', 'qfrq': '2020-05-08', 'bxsy': '加班打车', 'bz': '备注朱' },
        { 'bxdh': 'BXCL468623563', 'fylx': '差旅费', 'bxztName': '已打款', 'fyhj': '5000', 'qfrq': '2020-05-08', 'bxsy': '加班打车', 'bz': '备注朱' },
        { 'bxdh': 'BXCL468623563', 'fylx': '差旅费', 'bxztName': '已打款', 'fyhj': '5000', 'qfrq': '2020-05-08', 'bxsy': '加班打车', 'bz': '备注朱' },
        { 'bxdh': 'BXCL468623563', 'fylx': '差旅费', 'bxztName': '已打款', 'fyhj': '5000', 'qfrq': '2020-05-08', 'bxsy': '加班打车', 'bz': '备注朱' }
      ]
      this.loading = false */
      const param = { pageNo: this.pageNo, type: 'wechat' }
      if (this.mode === 'approve') {
        param.type = 'approve'
      }
      if (this.currentType === 'evection') {
        param.bxlx = '1'
      } else if (this.currentType === 'traffic') {
        param.bxlx = '2'
      } else if (this.currentType === 'meal') {
        param.bxlx = '3'
      } else if (this.currentType === 'other') {
        param.bxlx = '5'
      }

      query('/wb/ribs/approveQuery', 'GET', param, {}).then(res => {
        if (res.result.data != null && res.result.data.length !== 0) {
          this.list = res.result.data
          const total = res.result.totalCount
          this.showLoadingMore = total > this.list.length
        }
        this.loadingMore = false
        this.loading = false
        this.mainLoading = false
      })

      if (this.mode === 'approve') {
        query('/wb/ribs/allCount', 'GET', param, {}).then(res => {
          this.menus[0].count = res.result.data[0]
          this.menus[1].count = res.result.data[1]
          this.menus[2].count = res.result.data[2]
          this.menus[3].count = res.result.data[3]
        })
      }
    },
    /**
     * 加载更多
     */
    onLoadMore () {
      this.loadingMore = true
      this.pageNo++

      const param = { pageNo: this.pageNo, type: 'wechat' }
      if (this.mode === 'approve') {
        param.type = 'approve'
      }
      if (this.currentType === 'evection') {
        param.bxlx = '1'
      } else if (this.currentType === 'traffic') {
        param.bxlx = '2'
      } else if (this.currentType === 'meal') {
        param.bxlx = '3'
      } else if (this.currentType === 'other') {
        param.bxlx = '5'
      }
      query('/wb/ribs/approveQuery', 'GET', param, {}).then(res => {
        if (res.result.data != null && res.result.data.length !== 0) {
          this.list = this.list.concat(res.result.data)
          const total = res.result.totalCount
          this.showLoadingMore = (total > this.list.length)
        }
        this.loadingMore = false
        this.loading = false
        this.mainLoading = false
      })
    },
    /**
     * 点击菜单
     */
    menuClick (item) {
      this.mainLoading = true
      item.checked = true
      this.currentType = item.type
      this.checked = []
      this.init()
      this.menus.forEach(menu => {
        if (menu.type !== this.currentType) {
          menu.checked = false
        } else {
          menu.checked = true
        }
      })
    },
    onChange (checkedValues) {
      this.checked = checkedValues
      // this.$emit('mutiSelect', this.checked)
    },
    viewDetail (item) {
      let modeDetail = 'search'
      if (item.bxzt === '5') {
        modeDetail = 'edit'
      }
      if (this.mode === 'approve') {
        modeDetail = 'approve'
      }
      const type = this.currentType ? this.currentType : 'evection'
      /* if (bxlx === '1') {
      } else if (bxlx === '2') {
      } else if (bxlx === '3') {
      } */
      this.$router.push({
        name: 'appFillinMain',
        query: {
          mode: modeDetail,
          type: type,
          bxdh: item.bxdh,
          bxlx: item.bxlx
        }
      })
    },
    deleteClick (currentitem) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: `确认要删除报销单据${
          currentitem.bxdh === undefined ? '' : currentitem.bxdh
        }吗?`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          // 在这里调用删除接口
          _this.handleDelete(currentitem.bxdh)
        },
        onCancel: () => {
          _this.$message.info('取消操作')
        }
      })
    },
    /**
     * 删除
     */
    handleDelete (bxdh) {
      const url = '/wb/ribs/delRibs/'
      const actionParam = {
        // 请求参数
        url: url + bxdh + '/' + this.currentType,
        action: 'DELETE',
        message: '删除成功'
      }
      method(actionParam).then(res => {
        this.init()
      })
    },
    handleOkApprove () {
      if (this.selectInfo.yj.split(' ').join('').length === 0) {
        this.selectInfo.yj = '同意'
      }
      this.confirmLoadingApprove = true
      this.checked.forEach((item, index) => {
        item.yj = this.selectInfo.yj
        item.bxyj = '1'
      })
      this.actionParam = {
        url: '/wb/ribs/approve',
        action: 'PUT',
        parameter: {},
        data: this.checked,
        message: '审批成功'
      }
      // 调用请求
      return method(this.actionParam).then(res => {
        this.confirmLoadingApprove = false
        // 关闭编辑框
        this.modelVisibleApprove = false
        // 刷新列表
        this.init()
      })
    },
    handleCancelApprove () {
      if (this.selectInfo.yj.split(' ').join('').length === 0) {
        this.$notification['info']({
          message: '请填写审批意见',
          duration: 4
        })
        return
      }
      this.confirmLoadingApprove = true
      // this.selectInfo.bxyj = '0'
      this.checked.forEach((item, index) => {
        item.yj = this.selectInfo.yj
        item.bxyj = '0'
      })
      this.actionParam = {
        url: '/wb/ribs/approve',
        action: 'PUT',
        parameter: {},
        data: this.checked,
        message: '审批成功'
      }
      // 调用请求
      return method(this.actionParam).then(res => {
        this.confirmLoadingApprove = false
        // 关闭编辑框
        this.modelVisibleApprove = false
        // 刷新列表
        this.init()
      })
    },
    openApproveModal () {
      if (this.checked.length === 1) {
        this.$refs.approve.begin(this.checked)
      } else if (this.checked.length === 0) {
        this.$message.info('请先选择准备审批的单据')
      } else {
        this.modelVisibleApprove = true // 弹出框显示
      }
      // this.$refs.approve.begin(this.checked)
      /* if (this.checked.length === 0 && this.bxdh === undefined) {
        this.$message.info('请先选择准备报销的单据')
      } else if (this.bxdh !== undefined) {
        const ids = []
        this.list.some(item => {
          ids.push(item.id)
        })
        this.calculateSum()
        this.checked = ids
        this.$refs.modal.begin(ids)
      } else if (this.bxdh === undefined) {
        this.$refs.modal.begin(this.checked)
      } */
    },
    cancel () {
      // this.$router.push({ name: 'appExpenseIndex' })
      this.checked = []
      this.$store.commit('DELETE_KEEP_ALIVE_LIST', 'AppHistoryMain')
      this.$router.back()
    }
  }
}
</script>
<style lang="less" scoped>
.menu {
  height: 90px;
  border-radius: 5px;
  padding: 10px;
  margin: -30px 10px 10px;
  background-color: #ffffff;
  .image_col {
    text-align: center;
    .image_img {
      width: 50px;
      margin: 0px 20px 0px;
    }
  }
}
.card-wrapper {
  overflow: scroll;
  background-color: #ffffff;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  .list {
    min-height: 350px;
  }
}
.button {
  width: 100%;
  position: fixed;
  bottom: 0;
  .submit-btn {
    width: 50%;
    height: 40px;
  }
}
.checkbox {
  padding: 20px 0 20px 10px;
  top: 30%;
  width: 40px;
  height: 70px;
}
.ant-modal {
  top: 10px !important;
}
</style>
